<template>
  <div>
    <el-table :data="tableData" :columns="columns" border>
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column v-for="column in columns" :key="column.prop" :label="column.label">
        <template v-if="column.slot" slot-scope="scope">
          <slot :name="column.slot" :row="scope.row"></slot>
        </template>
        <template v-else>
          {{ scope.row[column.prop] }}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-if="showPagination" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
      layout="sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange"></el-pagination>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { ElTableColumn, ElPagination } from 'element-plus';

export default defineComponent({
  name: 'CustomTable',
  components: {
    ElTableColumn,
    ElPagination,
  },
  props: {
    tableData: {
      type: Array as any,
      required: true,
    },
    columns: {
      type: Array as any,
      required: true,
    },
    showPagination: {
      type: Boolean,
      default: true,
    },
    total: {
      type: Number,
      default: 0,
    },
    currentPage: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
  },
  methods: {
    handleSizeChange(size: number) {
      console.log('Size changed:', size);
      // 处理每页显示条数变化的逻辑
    },
    handleCurrentChange(page: number) {
      console.log('Page changed:', page);
      // 处理当前页码变化的逻辑
    },
  },
});
</script>
